<template>
  <div class="box">
    <div class="pageTop">
      <span class="iconfont backHistory" @click="spotCheckView">&#xe6eb;</span>
      <span class="sellWorkOrder_header_title">新建工单</span>
      <span
        class="iconfont"
        v-focusable
        @click="backToHomepage"
        style="float:right;line-height:40px;font-size:17px;margin-right:15px;"
        >&#xe668;</span
      >
    </div>
    <div class="content">
      <ul class="contentUl">
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">工单类型</span>
          </div>
          <div class="contentRight">
            维修
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">&nbsp;</span>
            <span class="contentLeftFont">部门</span>
          </div>
          <div class="contentRight">
            <organization
              class="changeDep"
              :selectDepartment="curDepartment"
              @department_select="departmentSelected"
              ref="department"
              :style="{
                color: departmentIdshow ? '#fff!important' : '#6f6f77!important'
              }"
            >
            </organization>
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">&nbsp;</span>
            <span class="contentLeftFont">设备</span>
          </div>
          <div class="contentRight cancelPos">
            <device
              :deviceId="departmentId"
              @getDeviceData="getDevice"
              ref="devices"
              :style="{
                color: deviceIdshow ? '#fff!important' : '#6f6f77!important'
              }"
            ></device>
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">负责人</span>
          </div>
          <div class="contentRight">
            <fz-people
              class="changeDep"
              :peopleId="departmentId"
              :leader="selectPeopleId"
              @selectPeople="getPeople"
              ref="people"
              :style="{
                color: selectPeopleIdshow
                  ? '#fff!important'
                  : '#6f6f77!important'
              }"
            >
            </fz-people>
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">&nbsp;</span>
            <span class="contentLeftFont">处理人</span>
          </div>
          <div class="contentRight">
              <input type="text" v-model="handler" placeholder="请输入姓名使用逗号间隔" maxlength="40">
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">&nbsp;</span>
            <span class="contentLeftFont">验收负责人</span>
          </div>
          <div class="contentRight">
            <fz-people
              class="changeDep"
              :peopleId="departmentId"
              :leader="receiver"
              :name="receiverName"
              @selectPeople="selectReceiver"
              ref="people"
              style="color: #fff !important"
            >
            </fz-people>
          </div>
        </li>
        <li class="contentList">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">优先级</span>
          </div>
          <div class="contentRight cancelPos">
            <priority
              @getPriorityData="getPriorityData"
              ref="prioritys"
            ></priority>
          </div>
        </li>
        <li class="contentList full">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">描述</span>
          </div>
          <div class="contentRight">
            <textarea
              name="userQuestion"
              v-model="userQuestion"
              placeholder="请输入相关问题"
              class="userQuestion"
              maxlength="100"
              @blur="recovery"
            ></textarea>
          </div>
        </li>
        <!-- <li class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">部件</span>
          </div>
          <div class="contentRight cancelPos">
            <parts
              :partsId="deviceId"
              @getPartsData="getPartsData"
              ref="parts"
              :style="{
                color: partsIdshow ? '#fff!important' : '#6f6f77!important'
              }"
            ></parts>
          </div>
        </li> -->
        <li class="contentList upload">
          <div class="contentLeft">
            <span class="contentLeftFont">附件</span>
          </div>
          <div class="contentRight cancelPos ">
            <upload :file-list="fileList" :loading="loading" :max-count="10" :max-size="10*1024*1024" @oversize="oversize" @overcount="overcount" :file-stream="true" @delete="deleteList" @afterRead="afterRead"></upload>
          </div>
        </li>

        <li class="contentList">
          <button type="button" class="subBtn" @click="cancel">取消</button>
          <button type="button" class="subBtn" @click="submit">提交</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Organization from "../common/sellWorkOrderDepartment";
import fzPeople from "../common/sellWorkOrderPeople";
import device from "../common/device";
import parts from "../common/parts";
import priority from "../common/priority";
import upload from "@/components/common/upload/upload";
import WorkSheetDao from "@/daos/work_sheet_dao";
import FileUpload from "@/daos/file_upload";
import { Toast,XInput  } from 'vux'
export default {
  components: {
    Organization,
    fzPeople,
    device,
    parts,
    priority,
    Toast,
    XInput,
    upload
  },
  data() {
    return {
      userQuestion: "",
      listValue: 0,
      leader: "",
      departmentId: "", //部门id
      selectPeopleId: "", //处理人id
      getSelectDevice: {}, //获取设备
      getParts: {}, //获取部件
      deviceId: "", //设备id
      partsId: "", //部件id
      priorityId: "", //优先级id
      handler: "", // 处理人
      receiver: "", // 验收人
      receiverName: "", // 验收人
      departmentIdshow: false,
      selectPeopleIdshow: false,
      deviceIdshow: false,
      partsIdshow: false,
      url: "",
      fileList:[],
      loading:false,
      curDepartment: {
        departmentName: "未选择",
        id: -1
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  created() {
    this.initDefaultForm();
  },
  methods: {
    recovery() {
      window.scroll(0, 0);
    },
    spotCheckView() {
      history.back(-1);
    },
    initDefaultForm() {
      let params = this.getSellWorkOrder();
      if (params) {
        this.selectPeopleId = params.leader;
        this.selectPeopleIdshow = true;
        if (params.departmentId) {
          this.departmentId = params.departmentId;
          this.curDepartment.id = params.departmentId;
          this.curDepartment.departmentName = params.departmentName;
          this.departmentIdshow = true;
        }
      }
      if (this.$store.state.user) {
        this.receiver = this.$store.state.user.id;
        this.receiverName = this.$store.state.user.name;
      } else {
        this.getUserInfo()
      }
    },
    getUserInfo(){
      this.$http(this.$API.getUserInfo, {}).then((res) => {
          this.$store.commit('saveUser', res);
          this.receiver = this.$store.state.user.id;
          this.receiverName = this.$store.state.user.name;
      })
    },
    // 点击完成的时候，获取部门数据
    departmentSelected(params) {
      if (!!params.id) {
        this.curDepartment = params;
        this.departmentId = params.id;
        this.$nextTick(e => {
          // 清空处理人
          // this.$refs.people.departPeople = "";
          // this.selectPeopleId = "";

          // 清空设备
          this.deviceId = "";
          this.$refs.devices.selectdeviceData = "";

          // 清空部件
          // this.partsId = "";
          // this.$refs.parts.selectPartsName = "";
        });
      } else {
        this.departmentId = this.curDepartment.id;
      }
      if (!this.departmentId) {
        this.departmentIdshow = false;
      } else {
        this.departmentIdshow = true;
      }
      /* this.getRecordsData();
            this.getToDealNum(); */
    },
    // 当点击完成时，获取处理人
    getPeople(peopleData) {
      if (!!peopleData.id) {
        this.selectPeopleId = peopleData.id;
      }
      if (!this.selectPeopleId) {
        this.selectPeopleIdshow = false;
      } else {
        this.selectPeopleIdshow = true;
      }
    },
    // 当点击完成时，获取处理人
    selectReceiver(peopleData) {
      if (!!peopleData.id) {
        this.receiver = peopleData.id;
      }
    },
    // 获取设备数据
    getDevice(data) {
      if (!!data.id) {
        this.getSelectDevice = data;
        this.deviceId = data.id || null;
        // 清空部件
        // this.partsId = "";
        // this.$refs.parts.selectPartsName = "";
      }
      if (!data.id) {
        this.deviceIdshow = false;
      } else {
        this.deviceIdshow = true;
      }
    },
    // 获取部件的数据
    getPartsData(data) {
      if (!!data.id) {
        this.partsId = data.id || null;
      }
      if (!data.id) {
        this.partsIdshow = false;
      } else {
        this.partsIdshow = true;
      }
    },
    // 获取优先级
    getPriorityData(data) {
      if (!!data.id) {
        this.priorityId = data.id;
      }
    },
    // 统计最近七天处理的数量
    getRecordsData() {
      this.spotCheckMonth = [];
      //运维工单信息
      this.$http(
        this.$API.getCheckRecordByMonth,
        { departmentId: this.departmentId },
        true
      ).then(res => {
        if (res) {
          for (var item of res) {
            this.spotCheckMonth.push([item.createTime, parseInt(item.count)]);
          }
          this.getReplaceData();
        }
      });
    },
    // 获取点巡检和更换可操作的数量
    getToDealNum() {
      //点巡检设备数目
      this.$http(
        this.$API.getCheckConfigNum,
        { departmentId: this.departmentId },
        true
      ).then(res => {
        if (res) {
          this.spotCheckNum = res.count;
          if (res.waitcount) {
            this.replaceExecutedNum = res.waitcount;
          }
        }
      });
      //更换设备数目
      this.$http(
        this.$API.getReplaceConfigCount,
        { departmentId: this.departmentId },
        true
      ).then(res => {
        if (res) {
          this.replaceRecordNum = res.count;
        }
      });
    },

    getReplaceData() {
      this.replaceRecordMonth = [];
      this.$http(
        this.$API.getReplaceRecordByMonth,
        { departmentId: this.departmentId },
        true
      ).then(res => {
        if (res) {
          for (var item of res) {
            this.replaceRecordMonth.push([
              item.createTime,
              parseInt(item.count)
            ]);
          }
          // this.drawLine();
        }
      });
    },
    cancel() {
      this.$router.replace("/workSheetHomePage");
    },
    submit() {
      // if (this.departmentId.length <= 0 || this.departmentId < 0) {
      //   this.$commom.alert("请选择部门后在提交！");
      //   return false;
      // }

      if (!this.selectPeopleId) {
        this.$commom.alert("请选择负责人后再提交！");
        return false;
      }

      if (!this.priorityId) {
        this.$commom.alert("请选择优先级后再提交！");
        return false;
      }

      if (!this.userQuestion) {
        this.$commom.alert("请输入描述后再提交！");
        return false;
      } else if (this.userQuestion.length > 100) {
        this.$commom.alert("描述最多可以填写100字！");
        return false;
      }

      let params = {
        type: 4,
        leader: this.selectPeopleId,
        receiver: this.receiver,
        handler: this.handler,
        description: this.userQuestion,
        deviceId: this.deviceId,
        componentId: this.partsId,
        priority: this.priorityId,
        departmentId: this.departmentId,
        files: this.fileList
      };

      WorkSheetDao.postWorkSheetSaveWorkAdd(params, res => {
        params.departmentName = this.curDepartment.departmentName;
        this.saveSellWorkOrder(params);
        this.$commom.alert("派单成功！");
        this.selectPeopleId = "";
        this.userQuestion = "";
        this.deviceId = "";
        this.partsId = "";
        this.priorityId = "";
        this.departmentId = "";
        // 清空所有的值
        this.$refs.department.curDepartment = "";
        this.$refs.people.departPeople = " ";
        this.$refs.devices.selectdeviceData = "";
        // this.$refs.parts.selectPartsName = "";
        this.$refs.prioritys.priority = "";
        this.fileList.splice(0,this.fileList.length)
        this.$router.push({
          path: "/workSheetHomePage"
        });
      });

      // this.$http(this.$API.referTo,params,true).then((res)=>{
      // });
    },

    saveSellWorkOrder(obj) {
      localStorage.setItem("sellWorkOrder", JSON.stringify(obj));
    },
    getSellWorkOrder(obj) {
      let sellWorkOrder = JSON.parse(localStorage.getItem("sellWorkOrder"));
      return sellWorkOrder;
    },
    oversize(){
      this.$vux.toast.text('文件大小请不要超过5MB。')
    },
    overcount(){
      this.$vux.toast.text('文件个数请小于10个。')
    },
    deleteList(index){
      this.fileList.splice(index,1)
    },
    afterRead(files){
      let formData = new FormData();
      formData.append('file', files);
      this.loading = true
      FileUpload.upload(formData,res=>{
        // console.log(res);
        this.loading = false
        this.fileList.push(res)
      }, err=>{
        this.loading = false
        this.$vux.toast.text(err)
      })
    }
  }
};
</script>

<style lang="less" scoped>
textarea::-webkit-input-placeholder {
  color: rgb(111, 111, 119) !important;
}
textarea:-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}

textarea::-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}
textarea:-ms-input-placeholder  {
  color: rgb(111, 111, 119) !important;
}

input{
    &::placeholder{
      font-size: 14px;
      color: gray !important;
    }
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
}
html,
body {
  width: 100%;
}
.box {
  width: 100%;
  height: 100vh;
  background-color: #18182c;
}
.backHistory {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  line-height: 40px;
  font-size: 25px !important;
  margin-left: 10px;
}
.pageTop {
  height: 40px;
  color: #fff;
  position: fixed;
  height: 40px;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #22233f;
  z-index: 9;
  .sellWorkOrder_header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
.content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 15px;
  box-sizing: border-box;
  padding-top: 40px;
  -webkit-overflow-scrolling: touch;
}
.contentUl {
  width: 100%;
  height: 100%;
}
.contentList {
  padding: 15px 0;
  overflow: hidden;
  border-bottom: 1px solid #464656;
  display: flex;
  justify-content: space-between;
  &.full {
    flex-wrap: wrap;
    .contentRight {
      width: 100%;
    }
  }
}

.upload{
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: space-between;
}
.contentLeft,
.contentRight {
  font-size: 17px;
}
.contentLeft {
  color: #ffffff;
  flex: none;
}
.contentRight {
  position: relative;
  color: #8c8c96;
  box-sizing: border-box;
  margin-top: 3px;
  input {
    text-align: right;
    touch-action: none;
    width: 180px;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    &.full {
      width: 100%;
    }
  }
}
.cancelPos {
  position: static;
  width: auto !important;
}
.notNull {
  color: #d81e06;
}

.userQuestion {
  font-size: 17px;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #747480;
  color: #fff;
  text-align: left !important;
}
.userQuestion::-webkit-input-placeholder {
  color: #6f6f77;
  text-align: left;
}
.subBtn {
  width: 80%;
  height: 40px;
  line-height: 1;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  border-radius: 13px;
  background-color: #456de6;
  color: #ffffff;
  margin: 0 4%;
  font-size: 17px;
  margin-top: 0;
}
</style>
